<!-- ⚠️ 该文件由 scripts/update-showcase.ts 自动生成。请运行 `pnpm showcase:update` 以刷新数据。 -->

# 优秀案例展示

以下内容来自 [谁在使用 weapp-tailwindcss ？](https://github.com/sonofmagic/weapp-tailwindcss/issues/270)，列表顺序按照提交时间排序。

> 最近同步：2025年11月17日 22:57

<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
<div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white/70 dark:bg-gray-900/40 p-4 shadow-sm hover:shadow-md transition-shadow">

### 区白白

**提交者**：[@shebaoting](https://github.com/shebaoting) · 2024年1月16日 · [查看评论](https://github.com/sonofmagic/weapp-tailwindcss/issues/270#issuecomment-1893805052)  
区白白是一个针对小区业主的小程序，它将不同的小区变成一个个的线上社区。业主可以在这个线上社区里参与小区事务，享受区白白的其他服务。

<div className="grid grid-cols-1 sm:grid-cols-1 gap-3 mt-4">
  <img loading="lazy" src="/img/showcase/001.区白白/01-gh-8c7db74ca0d5-258.jpg" alt="gh_8c7db74ca0d5_258" className="h-64 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
</div>
<details className="mt-4 rounded-xl border border-gray-100 dark:border-gray-800 bg-gray-50/70 dark:bg-gray-900/30 p-3">
  <summary className="cursor-pointer list-none font-medium text-sm text-gray-600 dark:text-gray-300">📸 展开查看其余 6 张图片</summary>
  <div className="pt-3">
    <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
      <img loading="lazy" src="/img/showcase/001.区白白/02-1.png" alt="1" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
      <img loading="lazy" src="/img/showcase/001.区白白/03-2.png" alt="2" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
      <img loading="lazy" src="/img/showcase/001.区白白/04-3.png" alt="3" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
      <img loading="lazy" src="/img/showcase/001.区白白/05-4.png" alt="4" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
      <img loading="lazy" src="/img/showcase/001.区白白/06-5.png" alt="5" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
      <img loading="lazy" src="/img/showcase/001.区白白/07-6.png" alt="6" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
    </div>
  </div>
</details>
</div>
<div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white/70 dark:bg-gray-900/40 p-4 shadow-sm hover:shadow-md transition-shadow">

### 紫薇告诉你

**提交者**：[@iguojincom](https://github.com/iguojincom) · 2024年4月12日 · [查看评论](https://github.com/sonofmagic/weapp-tailwindcss/issues/270#issuecomment-2050936255)  
ChatGPT+通义千问+360智脑驱动的MBTI测试小程序,有了AI加持,我可以随时更新题库,增加对各种职业的支持,目前来看,AI出题质量还是比较高的,使用tailwindcss+uniapp开发,后端使用php8.2运行webman框架,内置异步的http客户端,还不错

<div className="grid grid-cols-1 sm:grid-cols-1 gap-3 mt-4">
  <img loading="lazy" src="/img/showcase/002.紫薇告诉你/01-1525626140.jpg" alt="1525626140" className="h-64 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
</div>
<details className="mt-4 rounded-xl border border-gray-100 dark:border-gray-800 bg-gray-50/70 dark:bg-gray-900/30 p-3">
  <summary className="cursor-pointer list-none font-medium text-sm text-gray-600 dark:text-gray-300">📸 展开查看其余 3 张图片</summary>
  <div className="pt-3">
    <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
      <img loading="lazy" src="/img/showcase/002.紫薇告诉你/02-1211634271.jpg" alt="1211634271" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
      <img loading="lazy" src="/img/showcase/002.紫薇告诉你/03-2009275645.jpg" alt="2009275645" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
      <img loading="lazy" src="/img/showcase/002.紫薇告诉你/04-798057361.jpg" alt="798057361" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
    </div>
  </div>
</details>
</div>
<div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white/70 dark:bg-gray-900/40 p-4 shadow-sm hover:shadow-md transition-shadow">

### 今修小程序

**提交者**：[@imaxing](https://github.com/imaxing) · 2024年4月14日 · [查看评论](https://github.com/sonofmagic/weapp-tailwindcss/issues/270#issuecomment-2054102226)  
南通本土手机维修业务小程序

公司/组织/个人：个人

<div className="grid grid-cols-1 sm:grid-cols-1 gap-3 mt-4">
  <img loading="lazy" src="/img/showcase/003.今修小程序/01-gh-2f2372a36574-430.jpg" alt="gh_2f2372a36574_430" className="h-64 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
</div>
</div>
<div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white/70 dark:bg-gray-900/40 p-4 shadow-sm hover:shadow-md transition-shadow">

### 聚贞顺

**提交者**：[@zheng1716148634](https://github.com/zheng1716148634) · 2024年7月11日 · [查看评论](https://github.com/sonofmagic/weapp-tailwindcss/issues/270#issuecomment-2221971807)  
专业买卖二手自行车平台

公司/组织/个人：公司

<div className="grid grid-cols-1 sm:grid-cols-1 gap-3 mt-4">
  <img loading="lazy" src="/img/showcase/004.聚贞顺/01-gh-89ccc3e8df05-258-1.jpg" alt="gh_89ccc3e8df05_258 (1)" className="h-64 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
</div>
</div>
<div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white/70 dark:bg-gray-900/40 p-4 shadow-sm hover:shadow-md transition-shadow">

### 安心校友圈

**提交者**：[@hzbnb](https://github.com/hzbnb) · 2024年9月18日 · [查看评论](https://github.com/sonofmagic/weapp-tailwindcss/issues/270#issuecomment-2358280769)  
大学生内部社交圈子

公司/组织/个人：公司

<div className="grid grid-cols-1 sm:grid-cols-1 gap-3 mt-4">
  <img loading="lazy" src="/img/showcase/005.安心校友圈/01-anxin.jpg" alt="anxin" className="h-64 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
</div>
<details className="mt-4 rounded-xl border border-gray-100 dark:border-gray-800 bg-gray-50/70 dark:bg-gray-900/30 p-3">
  <summary className="cursor-pointer list-none font-medium text-sm text-gray-600 dark:text-gray-300">📸 展开查看其余 6 张图片</summary>
  <div className="pt-3">
    <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
      <img loading="lazy" src="/img/showcase/005.安心校友圈/02-安心-首页.jpg" alt="安心-首页" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
      <img loading="lazy" src="/img/showcase/005.安心校友圈/03-成绩.jpg" alt="成绩" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
      <img loading="lazy" src="/img/showcase/005.安心校友圈/04-课表.jpg" alt="课表" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
      <img loading="lazy" src="/img/showcase/005.安心校友圈/05-评论.jpg" alt="评论" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
      <img loading="lazy" src="/img/showcase/005.安心校友圈/06-私信.jpg" alt="私信" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
      <img loading="lazy" src="/img/showcase/005.安心校友圈/07-帖子.jpg" alt="帖子" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
    </div>
  </div>
</details>
</div>
<div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white/70 dark:bg-gray-900/40 p-4 shadow-sm hover:shadow-md transition-shadow">

### 一键呼援

**提交者**：[@daguanren21](https://github.com/daguanren21) · 2024年12月5日 · [查看评论](https://github.com/sonofmagic/weapp-tailwindcss/issues/270#issuecomment-2520218809)  
一键呼援 应用于企业级方案

公司/组织/个人：公司

<div className="grid grid-cols-1 sm:grid-cols-1 gap-3 mt-4">
  <img loading="lazy" src="/img/showcase/006.一键呼援/01-gh-49083ad7a74e-258.jpg" alt="gh_49083ad7a74e_258" className="h-64 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
</div>
<details className="mt-4 rounded-xl border border-gray-100 dark:border-gray-800 bg-gray-50/70 dark:bg-gray-900/30 p-3">
  <summary className="cursor-pointer list-none font-medium text-sm text-gray-600 dark:text-gray-300">📸 展开查看其余 1 张图片</summary>
  <div className="pt-3">
    <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
      <img loading="lazy" src="/img/showcase/006.一键呼援/02-f4a2a385-dfe2-45e2-ba52-9ce8e14d21be.jpg" alt="f4a2a385-dfe2-45e2-ba52-9ce8e14d21be" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
    </div>
  </div>
</details>
</div>
<div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white/70 dark:bg-gray-900/40 p-4 shadow-sm hover:shadow-md transition-shadow">

### 杭州数据交易所

**提交者**：[@HyaCiovo](https://github.com/HyaCiovo) · 2025年3月27日 · [查看评论](https://github.com/sonofmagic/weapp-tailwindcss/issues/270#issuecomment-2756185630)  
公司官方微信小程序

公司/组织/个人：公司

<p align="center">

</p>

<div className="grid grid-cols-1 sm:grid-cols-1 gap-3 mt-4">
  <img loading="lazy" src="/img/showcase/007.杭州数据交易所/01-image-1.jpg" alt="杭州数据交易所" className="h-64 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
</div>
</div>
<div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white/70 dark:bg-gray-900/40 p-4 shadow-sm hover:shadow-md transition-shadow">

### 俞行日记

**提交者**：[@yingyu4451](https://github.com/yingyu4451) · 2025年4月3日 · [查看评论](https://github.com/sonofmagic/weapp-tailwindcss/issues/270#issuecomment-2775396678)  
**GitHub**：https://github\.com/yingyu4451/Hospital\-Traveler

一款记录医院访问记录，并统计数据的移动应用。俞行日记不会联网，全程离线单机使用。

个人：AI食材营养分析助手

介绍：接入deepseek的食材营养分析助手

询问开头输入4451可以突破限制。

<div className="grid grid-cols-1 sm:grid-cols-1 gap-3 mt-4">
  <img loading="lazy" src="/img/showcase/008.俞行日记/01-image.jpg" alt="Image" className="h-64 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
</div>
<details className="mt-4 rounded-xl border border-gray-100 dark:border-gray-800 bg-gray-50/70 dark:bg-gray-900/30 p-3">
  <summary className="cursor-pointer list-none font-medium text-sm text-gray-600 dark:text-gray-300">📸 展开查看其余 3 张图片</summary>
  <div className="pt-3">
    <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
      <img loading="lazy" src="/img/showcase/008.俞行日记/02-image.jpg" alt="Image" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
      <img loading="lazy" src="/img/showcase/008.俞行日记/03-image.jpg" alt="Image" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
      <img loading="lazy" src="/img/showcase/008.俞行日记/04-image.jpg" alt="Image" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
    </div>
  </div>
</details>
</div>
<div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white/70 dark:bg-gray-900/40 p-4 shadow-sm hover:shadow-md transition-shadow">

### [悦骑行](https://yueqixing.com)

**提交者**：[@yunhouhuang](https://github.com/yunhouhuang) · 2025年7月15日 · [查看评论](https://github.com/sonofmagic/weapp-tailwindcss/issues/270#issuecomment-3071874776)  
**链接**：[https://yueqixing\.com](https://yueqixing.com)

悦骑行3.0版本重构中使用了 TailwindCSS ，极大提升了效率和规范。

- 公司：Guangzhou Jingji Zhiguang Technology Co., Ltd.

<div className="grid grid-cols-1 sm:grid-cols-1 gap-3 mt-4">
  <img loading="lazy" src="/img/showcase/009.悦骑行/01-悦骑行weapp小程序3.0.jpg" alt="悦骑行WEAPP小程序3.0" className="h-64 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
</div>
</div>
<div className="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white/70 dark:bg-gray-900/40 p-4 shadow-sm hover:shadow-md transition-shadow">

### [小而美工具](https://whinc.github.io/ucalc-website/)

**提交者**：[@whinc](https://github.com/whinc) · 2025年11月16日 · [查看评论](https://github.com/sonofmagic/weapp-tailwindcss/issues/270#issuecomment-3537484222)  
**链接**：[https://whinc\.github\.io/ucalc\-website/](https://whinc.github.io/ucalc-website/)  
**GitHub**：[https://github\.com/whinc/ucalc\-website](https://github.com/whinc/ucalc-website)

用心开发 100 款小而美的大众工具

<div className="grid grid-cols-1 sm:grid-cols-1 gap-3 mt-4">
  <img loading="lazy" src="/img/showcase/010.小而美工具/01-image.png" alt="Image" className="h-64 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
</div>
<details className="mt-4 rounded-xl border border-gray-100 dark:border-gray-800 bg-gray-50/70 dark:bg-gray-900/30 p-3">
  <summary className="cursor-pointer list-none font-medium text-sm text-gray-600 dark:text-gray-300">📸 展开查看其余 2 张图片</summary>
  <div className="pt-3">
    <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
      <img loading="lazy" src="/img/showcase/010.小而美工具/02-image-2.jpg" alt="小而美工具" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
      <img loading="lazy" src="/img/showcase/010.小而美工具/03-image.jpg" alt="Image" className="h-48 w-full object-contain rounded-xl border border-gray-100 dark:border-gray-800" />
    </div>
  </div>
</details>
</div>
</div>
